<div ng-controller="ChipsValidationCtrl as ctrl" layout="column" ng-cloak>
  <md-content class="md-padding" layout="column">

    <h2 class="md-title">Required</h2>
    <form name="fruitForm">
      <md-chips name="fruits"
                ng-model="ctrl.selectedFruit"
                ng-required="true"
                placeholder="Add a fruit">
      </md-chips>
      <div class="md-chips-messages"
           ng-show="fruitForm.fruits.$dirty || fruitForm.$submitted"
           ng-messages="fruitForm.fruits.$error">
        <div ng-message="required">At least one fruit is required</div>
      </div>
    </form>


    <h2 class="md-title">Max Chips</h2>
    <form name="vegetableForm">
      <md-chips name="vegetables"
                ng-model="ctrl.selectedVegetables"
                placeholder="Add a vegetable"
                md-max-chips="5">
      </md-chips>
      <div class="md-chips-messages"
           ng-show="vegetableForm.vegetables.$dirty || vegetableForm.$submitted"
           ng-messages="vegetableForm.vegetables.$error">
        <div ng-message="md-max-chips">You reached the maximum number of vegetables</div>
      </div>
    </form>

    <p class="note">
      Be aware that error messages for chips are not styled by default since they are not part of <code>md-input-container</code>.
    </p>

  </md-content>
</div>
